<template>
	<view class="container">
		<scroll-view class="content" scroll-y>
			<!-- 基本信息卡片 -->
			<view class="card basic-info">
				<view class="card-header">
					<text class="card-title">对账单明细</text>
				</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="info-label">对账单号</text>
						<text class="info-value">{{ detail.statement.statement_no }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">供应商名称</text>
						<text class="info-value">{{ detail.statement.shop.shopname }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">结算状态</text>
						<view class="status-tag status-settled" v-if="detail.statement.status === 'success'">
							对账成功
						</view>
						<view class="status-tag status-pending" v-if="detail.statement.status === 'pending'">
							待对账
						</view>
					</view>
					<view class="info-item">
						<text class="info-label">生成时间</text>
						<text class="info-value">{{ detail.statement.create_time_text }}</text>
					</view>
					<view class="info-item full-width">
						<text class="info-label">对账周期</text>
						<text class="info-value">{{ detail.statement.statement_start_time_text }} ~
							{{ detail.statement.statement_end_time_text }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">预计结算截止</text>
						<text class="info-value">{{ detail.statement.settlement_end_time_text }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">对账金额</text>
						<text class="info-value amount">¥{{ detail.statement.total_money }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">订单数</text>
						<text class="info-value">{{ detail.statement.order_num }}</text>
					</view>
					<view class="info-item full-width" v-if="detail.statement.memo">
						<text class="info-label">备注</text>
						<text class="info-value">{{ detail.statement.memo }}</text>
					</view>
				</view>
			</view>

			<!-- 发票信息 -->
			<view class="card invoice-info">
				<view class="card-header">
					<text class="card-title">发票信息</text>
					<view class="invoice-summary">
						<text class="summary-text">已添加 {{ detail.invoice_list.length || 0 }} 张发票</text>
					</view>
				</view>

				<view class="invoice-stats">
					<view class="stat-item">
						<text class="stat-label">发票总金额</text>
						<text class="stat-value">¥{{ detail.statement.invoice_total_money }}</text>
					</view>
					<view class="stat-item">
						<text class="stat-label">订单绑定发票金额</text>
						<text class="stat-value">¥{{ detail.statement.invoice_total_money }}</text>
					</view>
				</view>

				<view class="invoice-table" v-if="detail.invoice_list && detail.invoice_list.length > 0">
					<view class="table-header">
						<text class="table-col">操作</text>
						<text class="table-col">发票号码</text>
						<text class="table-col">开票日期</text>
						<text class="table-col">发票金额</text>
						<text class="table-col">备注</text>
						<text class="table-col">录入时间</text>
					</view>
					<view class="table-body">
						<view class="table-row" v-for="(invoice, index) in detail.invoice_list" :key="invoice.id"
							:class="{'even-row': index % 2 === 0}">
							<view class="table-col">
								<button class="btn-view" @click="viewInvoice(invoice)">查看发票</button>
							</view>
							<text class="table-col">{{ invoice.invoice_number }}</text>
							<text class="table-col">{{ invoice.invoice_date }}</text>
							<text class="table-col">¥{{ invoice.invoice_price }}</text>
							<text class="table-col">{{ invoice.memo || '-' }}</text>
							<text class="table-col">{{ formatTime(invoice.create_time) }}</text>
						</view>
					</view>
				</view>
				<view class="empty-state" v-else>
					<text class="empty-text">暂无发票信息</text>
				</view>
			</view>

			<!-- 流水清单 -->
			<view class="card order-list">
				<view class="card-header">
					<text class="card-title">流水清单</text>
				</view>

				<view class="order-table">
					<view class="table-header">
						<text class="table-col">商品型号</text>
						<text class="table-col">订单号</text>
						<text class="table-col">单价</text>
						<text class="table-col">数量</text>
						<text class="table-col">退货数量</text>
						<text class="table-col">退款金额</text>
						<text class="table-col">小计</text>
						<text class="table-col">确认收货时间</text>
					</view>
					<view class="table-body">
						<view class="table-row" v-for="(goods, index) in detail.order_goods_list" :key="goods.id"
							:class="{'even-row': index % 2 === 0}">
							<text class="table-col">{{ goods.model || goods.title }}</text>
							<text class="table-col">{{ goods.order.order_no }}</text>
							<text class="table-col">¥{{ goods.price }}</text>
							<text class="table-col">{{ goods.number }}</text>
							<text class="table-col">{{ goods.refund_num || 0 }}</text>
							<text class="table-col">¥{{ goods.refund_price || 0 }}</text>
							<text class="table-col">¥{{ calcSubtotal(goods) }}</text>
							<text class="table-col">{{ goods.order.taketime_text }}</text>
						</view>
					</view>
				</view>

				<view class="order-summary">
					<view class="summary-row">
						<text class="summary-label">商品总数量：</text>
						<text class="summary-value">{{ detail.statement.goods_num }}件</text>
					</view>
					<view class="summary-row">
						<text class="summary-label">商品总金额：</text>
						<text class="summary-value">¥{{ detail.statement.total_money }}</text>
					</view>
					<view class="summary-row">
						<text class="summary-label">退货总数量：</text>
						<text class="summary-value">{{ detail.total_refund_num || 0 }}件</text>
					</view>
					<view class="summary-row">
						<text class="summary-label">退货总金额：</text>
						<text class="summary-value">¥{{ detail.total_refund_amount || 0 }}</text>
					</view>
				</view>
			</view>

			<!-- 付款信息 -->
			<view class="card payment-info" v-if="detail.statement.payment_time">
				<view class="card-header">
					<text class="card-title">付款信息</text>
				</view>

				<view class="payment-details">
					<view class="payment-item">
						<text class="payment-label">付款时间</text>
						<text class="payment-value">{{ formatPaymentTime(detail.statement.payment_time) }}</text>
					</view>
					<view class="payment-item">
						<text class="payment-label">付款金额</text>
						<text class="payment-value amount">¥{{ detail.statement.payment_price }}</text>
					</view>
					<view class="payment-item">
						<text class="payment-label">付款凭证</text>
						<view class="payment-value">
							<button class="btn-view"
								@click="viewVoucher(detail.statement.payment_voucher)">查看凭证</button>
						</view>
					</view>
					<view class="payment-item full-width" v-if="detail.statement.payment_memo">
						<text class="payment-label">备注</text>
						<text class="payment-value">{{ detail.statement.payment_memo }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				detail: {
					statement: {},
					invoice_list: [],
					order_goods_list: []
				},
				loading: false
			};
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id;
				this.loadData();
			} else {
				this.$wanlshop.msg('参数错误');
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		methods: {
			loadData() {
				this.loading = true;
				return uni.$uv.http.get('/supplier/getStatementDetail', {
					params: {
						statement_id: this.id
					}
				}).then(res => {
					console.log('接口返回:', res);
					if (res.res.code === 1) {
						this.detail = res.res.data;
					} else {
						this.$wanlshop.msg(res.res.msg || '获取详情失败');
					}
				}).catch(error => {
					console.log('error', error);
					this.$wanlshop.msg('获取失败，请稍后重试');
				}).finally(() => {
					this.loading = false;
				});
			},

			getStatusClass(status) {
				if (status === 'pending') {
					return 'status-pending';
				} else if (status === 'processed') {
					return 'status-processed';
				} else if (status === 'success' || status === 'settled') {
					return 'status-settled';
				} else {
					return 'status-default';
				}
			},

			formatTime(timestamp) {
				if (!timestamp) return '-';
				const date = new Date(timestamp * 1000);
				return date.toLocaleString('zh-CN');
			},

			formatPaymentTime(timestamp) {
				if (!timestamp) return '-';
				const date = new Date(timestamp * 1000);
				return date.toLocaleString('zh-CN');
			},

			calcSubtotal(goods) {
				const quantity = goods.number - (goods.refund_num || 0);
				return (goods.price * quantity).toFixed(2);
			},

			viewInvoice(invoice) {
				if (invoice.invoice_image) {
					uni.previewImage({
						urls: [invoice.invoice_image]
					});
				} else {
					this.$wanlshop.msg('暂无发票图片');
				}
			},

			viewVoucher(voucher) {
				if (voucher) {
					uni.previewImage({
						urls: [voucher]
					});
				} else {
					this.$wanlshop.msg('暂无付款凭证');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		background-color: #f8fafc;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.content {
		height: calc(100vh - 40rpx);
	}

	.card {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
		border: 1rpx solid #f0f2f5;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding-bottom: 24rpx;
		border-bottom: 1rpx solid #f0f2f5;
	}

	.card-title {
		font-size: 34rpx;
		font-weight: 600;
		color: #1a1a1a;
		position: relative;
		padding-left: 16rpx;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 6rpx;
			height: 28rpx;
			background: #4a90e2;
			border-radius: 4rpx;
		}
	}

	/* 基本信息样式 */
	.info-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 28rpx;
	}

	.info-item {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-width: 45%;
	}

	.info-label {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 12rpx;
		font-weight: 400;
	}

	.info-value {
		font-size: 28rpx;
		color: #1a1a1a;
		font-weight: 500;
	}

	.full-width {
		min-width: 100%;
		flex: 0 0 100%;
	}

	.amount {
		color: #ff6b35;
		font-weight: 600;
		font-size: 30rpx;
	}

	/* 状态标签样式 */
	.status-tag {
		padding: 8rpx 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-weight: 500;
		align-self: flex-start;
	}

	.status-pending {
		background: rgba(255, 193, 7, 0.1);
		color: #ff9800;
		border: 1rpx solid rgba(255, 193, 7, 0.3);
	}

	.status-processed {
		background: rgba(33, 150, 243, 0.1);
		color: #2196f3;
		border: 1rpx solid rgba(33, 150, 243, 0.3);
	}

	.status-settled {
		background: rgba(76, 175, 80, 0.1);
		color: #4caf50;
		border: 1rpx solid rgba(76, 175, 80, 0.3);
	}

	.status-default {
		background: rgba(158, 158, 158, 0.1);
		color: #9e9e9e;
		border: 1rpx solid rgba(158, 158, 158, 0.3);
	}

	/* 发票信息样式 */
	.invoice-summary {
		.summary-text {
			font-size: 26rpx;
			color: #666;
		}
	}

	.invoice-stats {
		display: flex;
		justify-content: space-between;
		margin-bottom: 32rpx;
		padding: 24rpx;
		background: #f8fafc;
		border-radius: 12rpx;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}

	.stat-label {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.stat-value {
		font-size: 30rpx;
		font-weight: 600;
		color: #ff6b35;
	}

	/* 表格样式 */
	.table-header {
		display: flex;
		background: #f8fafc;
		border-radius: 12rpx 12rpx 0 0;
		padding: 24rpx 16rpx;
	}

	.table-body {
		border-radius: 0 0 12rpx 12rpx;
		overflow: hidden;
	}

	.table-row {
		display: flex;
		padding: 24rpx 16rpx;
		border-bottom: 1rpx solid #f0f2f5;

		&.even-row {
			background-color: #fafbfc;
		}

		&:last-child {
			border-bottom: none;
		}
	}

	.table-col {
		flex: 1;
		font-size: 26rpx;
		color: #333;
		text-align: center;
		word-break: break-all;
		padding: 0 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.table-header .table-col {
		font-weight: 600;
		color: #333;
		font-size: 26rpx;
	}

	.btn-view {
		padding: 12rpx 20rpx;
		background: #4a90e2;
		color: #ffffff;
		border: none;
		border-radius: 8rpx;
		font-size: 24rpx;
		transition: all 0.3s;

		&:active {
			background: #3a7bc8;
			transform: scale(0.98);
		}
	}

	/* 空状态 */
	.empty-state {
		padding: 60rpx 0;
		text-align: center;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}

	/* 订单汇总 */
	.order-summary {
		margin-top: 30rpx;
		padding-top: 24rpx;
		border-top: 1rpx solid #f0f2f5;
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.summary-row {
		display: flex;
		align-items: center;
		flex: 1;
		min-width: 45%;
	}

	.summary-label {
		font-size: 26rpx;
		color: #666;
	}

	.summary-value {
		font-size: 26rpx;
		color: #1a1a1a;
		font-weight: 500;
		margin-left: 8rpx;
	}

	/* 付款信息 */
	.payment-details {
		display: flex;
		flex-wrap: wrap;
		gap: 28rpx;
	}

	.payment-item {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-width: 45%;
	}

	.payment-label {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 12rpx;
	}

	.payment-value {
		font-size: 28rpx;
		color: #1a1a1a;
		font-weight: 500;

		&.amount {
			color: #4caf50;
			font-weight: 600;
			font-size: 30rpx;
		}
	}

	/* 响应式调整 */
	@media (max-width: 750px) {
		.container {
			padding: 16rpx;
		}

		.card {
			padding: 24rpx;
		}

		.info-item,
		.payment-item,
		.summary-row {
			min-width: 100%;
		}

		.table-col {
			font-size: 24rpx;
		}
	}
</style>